<script setup>
import {ref, reactive} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

const dialogVisible = ref(false)
const formRef = ref(null)
const emit = defineEmits(['close', 'submit']) // 定义事件

// 表单数据
const form = reactive({
  id: '',
  name: '',
  type: '单品',
  tag: '无',
  priceType: '单一规格',
  price: '',
  memberPrice: '',
  packingFee: '',
  isSpecial: '否',
  specialPrice: '',
  specialDate: '',
  category: '',
  cuisine: '',
  flavor: '',
  store: '',
  spec: '',
  minOrder: '',
  stock: '',
  description: '',
  status: true,
  showTakeout: true,
  showDineIn: true
})

// 表单验证规则
const rules = reactive({
  id: [{required: true, message: '请输入编号', trigger: 'blur'}],
  name: [{required: true, message: '请输入菜品名称', trigger: 'blur'}],
  category: [{required: true, message: '请选择分类', trigger: 'change'}],
  store: [{required: true, message: '请选择所属门店', trigger: 'change'}]
})

// 图片上传相关
const fileList = ref([
  {
    name: 'food1.jpg',
    url: 'https://cube.elemecdn.com/3/7c/3ea6beec24ad696b60f0894788fdpng.png'
  },
  {
    name: 'food2.jpg',
    url: 'https://cube.elemecdn.com/3/7c/3ea6beec24ad696b60f0894788fdpng.png'
  },
  {
    name: 'food3.jpg',
    url: 'https://cube.elemecdn.com/3/7c/3ea6beec24ad696b60f0894788fdpng.png'
  }
])

// 打开弹窗
const openDialog = () => {
  dialogVisible.value = true
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  formRef.value.resetFields()
  emit('close') // 通知父组件弹窗已关闭
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('确定要新增这个菜品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
          .then(() => {
            ElMessage.success('新增菜品成功')
            emit('submit', {...form}) // 通知父组件提交数据
            handleClose()
          })
          .catch(() => {
          })
    } else {
      ElMessage.error('请填写必填项')
      return false
    }
  })
}

// 图片相关操作
const handleRemove = (file, fileList) => {
  console.log('删除图片:', file)
}

const handlePictureCardPreview = (file) => {
  console.log('预览图片:', file)
}

const setMainImage = (index) => {
  console.log('设为主图:', index)
}

const removeImage = (index) => {
  console.log('删除图片:', index)
  fileList.value.splice(index, 1)
}

// 暴露方法
defineExpose({
  openDialog
})
</script>
<template>
  <el-dialog
      v-model="dialogVisible"
      title="新增菜品"
      width="800px"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="right"
    >
      <!-- 基本信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="编号" prop="id">
            <el-input v-model="form.id" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜品名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="菜品类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="单品">单品</el-radio>
              <el-radio label="套餐">套餐</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主图标签" prop="tag">
            <el-radio-group v-model="form.tag">
              <el-radio label="无">无</el-radio>
              <el-radio label="招牌">招牌</el-radio>
              <el-radio label="新品">新品</el-radio>
              <el-radio label="推荐">推荐</el-radio>
              <el-radio label="热销">热销</el-radio>
            </el-radio-group>
            <div class="tag-note">注：主图标签会展示在菜品主图上</div>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 售价 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="售价" prop="priceType">
            <el-radio-group v-model="form.priceType">
              <el-radio label="单一规格">单一规格</el-radio>
              <el-radio label="多规格">多规格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="form.priceType === '单一规格'">
        <el-col :span="8">
          <el-form-item label="售价（元）" prop="price">
            <el-input v-model="form.price" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会员价（元）" prop="memberPrice">
            <el-input v-model="form.memberPrice" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装费（元）" prop="packingFee">
            <el-input v-model="form.packingFee" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 特价 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否特价" prop="isSpecial">
            <el-radio-group v-model="form.isSpecial">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="form.isSpecial === '是'">
        <el-col :span="12">
          <el-form-item label="特价（元）" prop="specialPrice">
            <el-input v-model="form.specialPrice" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特价日期" prop="specialDate">
            <el-date-picker
                v-model="form.specialDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 分类 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="分类" prop="category">
            <el-select v-model="form.category" placeholder="请选择...">
              <el-option label="炒菜" value="炒菜"/>
              <el-option label="汤" value="汤"/>
              <el-option label="凉菜" value="凉菜"/>
              <el-option label="主食" value="主食"/>
              <el-option label="饮品" value="饮品"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜系" prop="cuisine">
            <el-select v-model="form.cuisine" placeholder="请选择...">
              <el-option label="川菜" value="川菜"/>
              <el-option label="粤菜" value="粤菜"/>
              <el-option label="鲁菜" value="鲁菜"/>
              <el-option label="苏菜" value="苏菜"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="口味" prop="flavor">
            <el-select v-model="form.flavor" placeholder="请选择...">
              <el-option label="麻辣" value="麻辣"/>
              <el-option label="清淡" value="清淡"/>
              <el-option label="甜" value="甜"/>
              <el-option label="酸" value="酸"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属门店" prop="store">
            <el-select v-model="form.store" placeholder="请选择...">
              <el-option label="大悦城店" value="大悦城店"/>
              <el-option label="泛海国际店" value="泛海国际店"/>
              <el-option label="国贸店" value="国贸店"/>
              <el-option label="朝阳门店" value="朝阳门店"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="规格" prop="spec">
            <el-select v-model="form.spec" placeholder="请选择...">
              <el-option label="小份" value="小份"/>
              <el-option label="中份" value="中份"/>
              <el-option label="大份" value="大份"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起卖数量" prop="minOrder">
            <el-input v-model="form.minOrder" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库存" prop="stock">
            <el-input v-model="form.stock" placeholder="请输入"/>
            <el-tag type="warning" style="margin-left: 10px">预警</el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 菜品介绍 -->
      <el-form-item label="菜品介绍：" prop="description">
        <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请输入"
            :rows="3"
            style="width: 500px"
        />
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item label="上传图片：" prop="images">
        <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
          <el-button type="primary">上传图片</el-button>
        </el-upload>
        <div class="image-list">
          <div class="image-item" v-for="(item, index) in fileList" :key="index">
            <img :src="item.url" alt="菜品图片"/>
            <div class="image-actions">
              <el-button type="text" @click="setMainImage(index)">设为主图</el-button>
              <el-button type="text" @click="removeImage(index)">删除</el-button>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 状态 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="售卖状态：" prop="status">
            <el-switch v-model="form.status"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外卖点餐显示：" prop="showTakeout">
            <el-switch v-model="form.showTakeout"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="堂食点餐显示：" prop="showDineIn">
            <el-switch v-model="form.showDineIn"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.tag-note {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.image-list {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.image-item {
  width: 150px;
  text-align: center;
}

.image-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border: 1px solid #eee;
}

.image-actions {
  margin-top: 10px;
}

:deep(.el-upload-list--picture-card) {
  display: none;
}
</style>